<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .container{
      width: 480px;
      height: 270px;
      margin: 150px auto;
      position: relative;
    }

    .container .next, .container .prev{
      position: absolute;
      width: 60px;
      height: 60px;
      background: rgba(255, 255,255,0.8);
      top: 105px;
      border-radius: 50%;
      text-align: center;
      line-height: 60px;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      user-select: none;
    }

    .container .next{
      right: 0;
    }

    body{
      background: radial-gradient(#fef, #38c);
      /* 1vw 等于视口宽度的 1% */
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <img width="100%" src="./images/1.jpg" alt="">

    <div class="next">&gt;</div>
    <div class="prev">&lt;</div>
  </div>

  <script>
    //将图片的路径存入到数组中
    let images = [
      './images/1.jpg',
      './images/2.jpg',
      './images/3.jpg',
      './images/4.jpg',
      './images/5.jpg',
      './images/haohuo.jpg'
    ];
    //获取 img 
    let img = document.querySelector('img');
    //获取 next 按钮
    let next = document.querySelector('.next');
    //获取 prev 按钮
    let prev = document.querySelector('.prev');
    //声明一个变量
    let index = 0;
    //为 next 下一个按钮绑定单击事件
    next.onclick = function(){
      //变量自增
      index++;
      //判断 index 的值是否越界
      if(index > images.length - 1){
        index = 0;
      }
      //切换图片的路径
      img.src = images[index];
    }
    //为 prev 安装绑定单击事件
    prev.onclick = function(){
      //递减 index 变量
      index--;
      //边界检测
      if(index < 0){
        //如果到了最左边, 则将下标定位到最右边
        index = images.length - 1;
      }
      //设置 img 图片的 src 属性
      img.src = images[index];
    }

  </script>
</body>
</html>